<template>
  <el-card style="position:relative">
    <baidu-map
      class="bm-view"
      :center="center"
      :zoom="zoom"
      scroll-wheel-zoom
    >
      <!-- 点聚合 -->
      <bml-marker-clusterer :averageCenter="true">
        <!-- 单个点 -->
        <bm-marker
          v-for="pos in posList"
          :key="pos.id"
          :position="{ lng: +pos.lng, lat: +pos.lat }"
        ></bm-marker>
      </bml-marker-clusterer>
      <!-- 地图类型 -->
      <bm-map-type
        :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
        anchor="BMAP_ANCHOR_TOP_LEFT"
      ></bm-map-type>
    </baidu-map>
    <!-- 全屏按钮 -->
    <div class="fullScreen" @click="fullScreenHandle">
      <i class="el-icon-full-screen" title="全屏"></i>
    </div>
    <!-- 全屏弹框 -->
    <el-dialog
      title="无障碍改造人员地址"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      center
    >
      <baidu-map
        class="bm-view-fullscreen"
        :center="center"
        :zoom="zoom"
        scroll-wheel-zoom
      >
        <!-- 点聚合 -->
        <bml-marker-clusterer :averageCenter="true">
          <!-- 单个点 -->
          <bm-marker
            v-for="pos in posList"
            :key="pos.id"
            :position="{ lng: +pos.lng, lat: +pos.lat }"
            @click="markerHandle(pos)"
          >
          </bm-marker>
        </bml-marker-clusterer>
        <!-- 地图类型 -->
        <bm-map-type
          :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
          anchor="BMAP_ANCHOR_TOP_LEFT"
        ></bm-map-type>
      </baidu-map>
      <!-- 改造详细信息弹框 -->
      <el-dialog
        width="40%"
        title="改造详情"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-descriptions :labelStyle="labelStyle" :column="2" border>
          <el-descriptions-item label="姓名" :span="2">
            {{ info.name }}
          </el-descriptions-item>
          <el-descriptions-item label="联系人">
            {{ info.linkman }}
          </el-descriptions-item>
          <el-descriptions-item label="联系方式">
            {{ info.linkmanPhone }}
          </el-descriptions-item>
          <el-descriptions-item label="改造内容" :span="2">
            {{ info.content }}
          </el-descriptions-item>
          <el-descriptions-item label="改造地址" :span="2">
            {{ info.address }}
          </el-descriptions-item>
          <el-descriptions-item label="经度">
            {{ info.lng }}
          </el-descriptions-item>
          <el-descriptions-item label="纬度">
            {{ info.lat }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            {{ info.status | keyText("BARRIER_FREE_STATUS") }}
          </el-descriptions-item>
          <el-descriptions-item label="改造时间">
            {{ info.createTime }}
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </el-dialog>
  </el-card>
</template>

<script>
import { BmlMarkerClusterer } from "vue-baidu-map";

export default {
  name: "centerBottom",
  components: {
    BmlMarkerClusterer
  },
  data() {
    return {
      labelStyle: {
        width: "120px",
        textAlign: "center"
      },
      center: { lng: 112.586973, lat: 34.570903 },
      zoom: 13,
      dialogVisible: false,
      innerVisible: false,
      show: false,
      posList: [],
      info: {}
    };
  },
  created() {
    this.API.getMapDataList().then(res => {
      this.posList = res.data;
    });
  },
  methods: {
    fullScreenHandle() {
      this.dialogVisible = true;
    },
    markerHandle(info) {
      this.innerVisible = true;
      this.info = info;
    }
  }
};
</script>

<style scoped>
  /deep/ .el-card__body {
    padding: 10px;
  }

  .bm-view {
    width: 100%;
    height: 42.5vh;
  }

  .bm-view-fullscreen {
    width: 100%;
    height: 93vh;
  }

  .fullScreen {
    position: absolute;
    right: 1.5vw;
    top: 3vh;
  }

  .fullScreen i {
    color: white;
    background: #00000047;
    padding: 7px;
    border-radius: 50%;
    cursor: pointer;
  }

  /deep/ .el-dialog__body {
    padding: 0;
  }

  /deep/ .el-dialog__header {
    padding: 10px 20px;
  }

  /deep/ .el-dialog__headerbtn {
    top: 15px;
  }

  @media screen and (min-width: 1980px) {
    .bm-view {
      height: 48.5vh;
    }

    .bm-view-fullscreen {
      height: 95vh;
    }

    .fullScreen {
      right: 1vw;
      top: 2vh;
    }
  }
</style>
